<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>循环渲染</title>
    <!-- <script src="https://unpkg.com/vue@3.5.21/dist/vue.global.js"></script> -->
    <script src="../assets/vue3.js"></script>

     <style>
        .content{

            border: solid 0.5px grey;
            margin: 20px;


        }

    </style>
</head>

<body>
    <div id="app">

        
            <!-- 遍历数组 -->
                           <h4>遍历数组</h4>

            <ul>
                <li v-for=" ( name ,i ) in  users     ">{{i}}---{{name}}</li>
               
            </ul>

            <hr>

            <!-- 遍历数组 循环嵌套 -->
              <h4>遍历数组 循环嵌套</h4>
             <ul>
                <li v-for=" ( p,index  ) in  persons     ">{{index}}--姓名:{{p.name}}  年龄:{{p.age}}  


                     <ul>爱好:
                            <li  v-for=" ( fav,findex  ) in  p.favs     "> {{findex}}--{{fav}} </li>

                     </ul>


                </li>
            </ul>

            <hr>
             <!-- 遍历对象 -->
              <h4>遍历对象</h4>
            <ul>
                <li v-for=" (value,key) in  userInfo     ">{{  key   }} : {{value}}</li>
               
            </ul>

    </div>
    


    <script>
        let app = Vue.createApp({
            data() {
                return {
                    users:[
                        "张三",
                        "李四",
                        "王五",
                        "赵六",
                        "张飞",
                    ],
                    persons:[
                        { name:'张飞',age:18  ,    favs:['喝酒','吃肉']},
                        { name:'刘备',age:28 ,    favs:['打牌','唱歌']},
                        { name:'李逵',age:38,    favs:['唱K','喝酒','打架']},
                        { name:'诸葛亮',age:48, favs:['观星','弹琴']},

                    ],
                    
                    userInfo:{
                        name:'张辽',
                        age: 50,
                        max:99999
                    }
                }
            },
            
        }).mount("#app")
    </script>
</body>

</html>